<template>
    <div class="page-container">
        <div class="page-title">
            <div>
                <img src=""/>
                <span class="title-name">陌上花开，可缓缓归矣</span>
            </div>
            <div class="no-drag">
                <div class="no-drag-box" @click="minWin"><img src="../../assets/imgs/min.svg"/></div>
                <div class="no-drag-box" @click="maxWin"><img src="../../assets/imgs/max.png"/></div>
                <div class="no-drag-box" @click="closeWin"><img src="../../assets/imgs/close.png"/></div>
            </div>
        </div>
        <div class="main-content">
            <div class="main-content-left">
                <nav-menu-left></nav-menu-left>
                <el-button class="tools" type="primary" size="mini" icon="el-icon-s-tools" @click="openModal">设置
                </el-button>
                <!--<el-button class="tools" type="primary" size="mini" icon="el-icon-s-tools" @click="ss">设置2-->
                <!--</el-button>-->
            </div>
            <div class="main-content-right">
                <router-view></router-view>
            </div>
        </div>
        <!--<aplayer class="music-box" v-if="isShow" :music="videoUpload" ref="audio" :float="true"-->
        <!--:autoplay="true" listMaxHeight="90px" :list="list" :showLrc="true" :volume="0.2"></aplayer>-->
        <aplayer id="dv" class="music-box" :audio="audio" :lrcType="lrcType" mini fixed @onListRemove="handleRemove"
                 ref="audio" :volume="0.1"></aplayer>
        <modals-container/>
    </div>
</template>

<script>
    import LoginAndRegister from './LoginAndRegister';
    import NavMenuLeft from "./NavMenuLeft";
    import {mapState} from 'vuex';

    export default {
        name: "MainPage",
        components: {NavMenuLeft},
        data() {
            return {
                // videoUpload: {},
                // isShow: false,
                // list: []
                audio: [
                    {
                        name: "",
                        artist: "",
                        url: "",
                        lrc: "",
                        cover: 'https://wx4.sinaimg.cn/mw690/0069xCvoly1ge0c5u1mg5j30yi0yidve.jpg',
                    }
                ],
                lrcType: 1,
                audioIds: []
            }
        },
        computed: mapState(["musicUrl"]),
        mounted() {
            this.$refs.audio.hideLrc();
        },
        watch: {
            musicUrl(v, o) {
                //push新歌曲的时候，判断列表内已有歌曲内容
                this.sendNewSongs(v);
                this.lrcType = 1;
            }
        },
        methods: {

            /**
             * FIXME 蔡依林歌曲 Love Love Love歌词循环bug
             * 解决方案：1、修改a-player插件
             *          2、正则表达式歌词，将相同时间time去除
             * FIXME 默认歌曲为空白，为了防止刚加载时插件响应报错，引入新错误，列表有空选项
             * 解决方案：1、显示时删除空选项，即当列表长度大于1时，删除空
             *          2、可以设置默认歌曲，新的用户都会听到的一首歌，后续可删除，当列表为空时，自动添加默认歌曲播放
             *          3、隐藏显示插件功能，列表长度大于1时再显示
             *  FIXME 关于列表歌曲删除问题，目前打算不再列表直接删除，弄一个列表进行操作
             *  FIXME 歌曲列表存储位置
             *          1、使用db存储在本地
             *          2、保存数据库
             */
            pushSongs(newSongs) {
                this.audioIds.unshift({
                    id: newSongs.id
                });
                // 直接push新的歌曲
                let obj = {
                    name: newSongs.name,
                    artist: newSongs.artist,
                    url: newSongs.url,
                    lrc: newSongs.lrc,
                    cover: 'https://wx4.sinaimg.cn/mw690/0069xCvoly1ge0c5u1mg5j30yi0yidve.jpg',
                };
                this.audio.unshift(obj);
                let zc = this.$refs.audio;
                let playPromise = zc.play();
                if (playPromise) {
                    playPromise.then(() => {
                        setTimeout(() => {
                            // console.log("done");
                            this.$refs.audio.play();
                        }, zc.duration * 1000);
                        this.$refs.audio.showLrc();
                    }).catch((e) => {
                        console.log("Operation is too fast, audio play fails");
                    })
                }
            },
            sendNewSongs(newSongs) {
                // console.log(newSongs);
                if (this.audio.length === 0) {
                    this.pushSongs(newSongs);
                } else {
                    // 判断是否已经有此歌曲
                    let param = this.audioIds.find((item) => item.id === newSongs.id);
                    // 没有此歌曲，push新的歌曲
                    if (param === undefined) {
                        this.pushSongs(newSongs);
                        this.audioIds.forEach((item, index) => {
                            if (item.id === newSongs.id) {
                                this.$refs.audio.switch(index);
                            }
                        });
                    } else {
                        // 有此歌曲，直接播放，找到位置，使用this.$refs.audio.switch(1);
                        console.log("有此歌曲，直接播放")
                        this.audioIds.forEach((item, index) => {
                            if (item.id === newSongs.id) {
                                this.$refs.audio.switch(index);
                            }
                        })
                    }
                }
            },
            handleRemove() {
                console.log("删除")
            },
            ss() {
                /**
                 * 列表跳转到对应的音乐
                 */
                this.$refs.audio.switch(1);
            },
            openModal() {
                this.$modal.show(LoginAndRegister, {}, {
                    width: 300,
                    height: 300
                })
            },

            minWin() {
                /**
                 * 隐藏窗口
                 */
                this.$electron.ipcRenderer.send("minWin");
            },
            maxWin() {
                /**
                 * 缩小/扩大窗口
                 */
                this.$electron.ipcRenderer.send("maxWin");
            },
            closeWin() {
                /**
                 * 显示窗口
                 */
                this.$electron.ipcRenderer.send("closeWin");
            }
        }
    }
</script>
<style>
    .el-menu {
        border-right: 0px !important;
    }
</style>
<style scoped lang="scss">
    .page-container {
        width: 100%;
        height: 100%;
        .page-title {
            background-color: #bc2f2e;
            width: 100%;
            height: 35px;
            line-height: 35px;
            display: flex;
            justify-content: space-between;
            -webkit-app-region: drag;
            .title-name {
                font-size: 14px;
                color: white;
            }
            .no-drag {
                -webkit-app-region: no-drag;
                display: flex;
                .no-drag-box {
                    height: 100%;
                    width: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &:hover {
                        background-color: red;
                    }
                }
            }
        }
        .main-content {
            width: 100%;
            height: calc(100% - 35px);
            display: flex;
            .main-content-left {
                width: 200px;
                height: 100%;
                position: relative;
                border-right: 1px #ccc solid;
                .tools {
                    position: absolute;
                    bottom: 0px;
                    right: 0px;
                }
            }
            .main-content-right {
                width: calc(100% - 201px);
                height: 100%;
            }
        }
        .music-box {
            width: 40%;
            position: fixed;
            bottom: 0px;
            /*position: absolute;*/
        }
    }
</style>